<template>
	<view>
		<view class="tops row">
					<view @click="currbtn(0)" :class="curr==0?'top-action':''" class="top-item column">
						<text>全部</text>
					</view>
					<view @click="currbtn(1)" :class="curr==1?'top-action':''" class="top-item column">
						<text>待付款</text>
					</view>
					<view @click="currbtn(2)" :class="curr==2?'top-action':''" class="top-item column">
						<text>待发货</text>
					</view>
					<view @click="currbtn(3)" :class="curr==3?'top-action':''" class="top-item column">
						<text>待收货</text>
					</view>
					<view @click="currbtn(4)" :class="curr==4?'top-action':''" class="top-item column">
						<text>待评价</text>
					</view>
				</view>
				<view v-if="curr==0">
					<block v-for="(it,index) in orderList">
						<view class="order">
							<view class="top flex align-center justify-between">
								<text>订单号: {{it.order_no}}</text>
								<text>{{it.status_str}}</text>
							</view>
							<view class="list" @tap='toOrderDetail(it.order_no)'>
								<block v-for="(itg,ind) in it.order_goods">
									<view class="item flex align-center justify-between">
										<image :src="itg.img_url"></image>
										<view class="flex flex-direction">
											<text>{{itg.title}}</text>
											<text>规格：{{itg.goods_guige}}</text>
										</view>
										<view class="flex flex-direction">
											<text class="text-price">{{itg.sell_price}}</text>
											<text>×{{itg.quantity}}</text>
										</view>
									</view>
								</block>
							</view>
							<view class="order-btom flex flex-direction align-end">
								<view>
									<text class="text1">总计{{it.order_num}}件商品</text>
									<text class="text2">合计</text>
									<text class="text3 text-price">{{it.order_amount}}</text>
									<text class="text2"></text>
								</view>
								<view class="flex align-center" v-if="judgeFinish(it.status_str)">
									<!-- <view class="btn1" @tap="toApplyReturn('退货',it)">申请退货</view>
									<view class="btn1" @tap="toApplyReturn('换货',it)">申请换货</view> -->
									<view class="btn2" @tap='delOrder(it)'>删除订单</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitCom(it.status_str)">
									<!-- <view class="btn1" @tap="toApplyReturn('退货',it)">申请退货</view>
									<view class="btn1" @tap="toApplyReturn('换货',it)">申请换货</view> -->
									<!-- <view class="btn2" @tap='toEvaluationOrder(it)'>去评价</view> -->
								</view>
								<view class="flex align-center" v-if="judgeWaitTeck(it.status_str)">
									<view class="btn1" @tap='toLogisticsInfor(it)'>查看物流</view>
									<view class="btn2" @tap='toCommit(it)'>确认收货</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitGoods(it.status_str)">
									<view class="btn2" @tap="toApplyReturn('退款',it)">申请退款</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitPay(it.status_str)">
									<view class="btn1" @tap='cancelOrder(it)'>取消订单</view>
									<view class="btn2" @tap='toPayOrder(it)'>立即付款</view>
								</view>
							</view>
						</view>
					</block>
					
					
				</view>
				<view v-if="curr==1">
					<block v-for="(it,index) in orderList">
						<view class="order">
							<view class="top flex align-center justify-between">
								<text>订单号: {{it.order_no}}</text>
								<text>{{it.status_str}}</text>
							</view>
							<view class="list" @tap='toOrderDetail(it.order_no)'>
								<block v-for="(itg,ind) in it.order_goods">
									<view class="item flex align-center justify-between">
										<image :src="itg.img_url"></image>
										<view class="flex flex-direction">
											<text>{{itg.title}}</text>
											<text>规格：{{itg.goods_guige}}</text>
										</view>
										<view class="flex flex-direction">
											<text class="text-price">{{itg.sell_price}}</text>
											<text>×{{itg.quantity}}</text>
										</view>
									</view>
								</block>
							</view>
							<view class="order-btom flex flex-direction align-end">
								<view>
									<text class="text1">总计{{it.order_num}}件商品</text>
									<text class="text2">合计</text>
									<text class="text3 text-price">{{it.order_amount}}</text>
									<text class="text2"></text>
								</view>
								<view class="flex align-center" v-if="judgeFinish(it.status_str)">
									<!-- <view class="btn1" @tap="toApplyReturn('退货',it)">申请退货</view>
									<view class="btn1" @tap="toApplyReturn('换货',it)">申请换货</view> -->
									<view class="btn2" @tap='delOrder(it)'>删除订单</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitCom(it.status_str)">
									<!-- <view class="btn1" @tap="toApplyReturn('退货',it)">申请退货</view>
									<view class="btn1" @tap="toApplyReturn('换货',it)">申请换货</view> -->
								<!-- 	<view class="btn2" @tap='toEvaluationOrder(it)'>去评价</view> -->
								</view>
								<view class="flex align-center" v-if="judgeWaitTeck(it.status_str)">
									<view class="btn1" @tap='toLogisticsInfor(it)'>查看物流</view>
									<view class="btn2" @tap='toCommit(it)'>确认收货</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitGoods(it.status_str)">
									<view class="btn2" @tap="toApplyReturn('退款',it)">申请退款</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitPay(it.status_str)">
									<view class="btn1" @tap='cancelOrder(it)'>取消订单</view>
									<view class="btn2" @tap='toPayOrder(it)'>立即付款</view>
								</view>
							</view>
						</view>
					</block>
					
				</view>
				<view v-if="curr==2">
					<block v-for="(it,index) in orderList">
						<view class="order">
							<view class="top flex align-center justify-between">
								<text>订单号: {{it.order_no}}</text>
								<text>{{it.status_str}}</text>
							</view>
							<view class="list" @tap='toOrderDetail(it.order_no)'>
								<block v-for="(itg,ind) in it.order_goods">
									<view class="item flex align-center justify-between">
										<image :src="itg.img_url"></image>
										<view class="flex flex-direction">
											<text>{{itg.title}}</text>
											<text>规格：{{itg.goods_guige}}</text>
										</view>
										<view class="flex flex-direction">
											<text class="text-price">{{itg.sell_price}}</text>
											<text>×{{itg.quantity}}</text>
										</view>
									</view>
								</block>
							</view>
							<view class="order-btom flex flex-direction align-end">
								<view>
									<text class="text1">总计{{it.order_num}}件商品</text>
									<text class="text2">合计</text>
									<text class="text3 text-price">{{it.order_amount}}</text>
									<text class="text2"></text>
								</view>
								<view class="flex align-center" v-if="judgeFinish(it.status_str)">
									<!-- <view class="btn1" @tap="toApplyReturn('退货',it)">申请退货</view>
									<view class="btn1" @tap="toApplyReturn('换货',it)">申请换货</view> -->
									<view class="btn2" @tap='delOrder(it)'>删除订单</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitCom(it.status_str)">
									<!-- <view class="btn1" @tap="toApplyReturn('退货',it)">申请退货</view>
									<view class="btn1" @tap="toApplyReturn('换货',it)">申请换货</view> -->
								<!-- 	<view class="btn2" @tap='toEvaluationOrder(it)'>去评价</view> -->
								</view>
								<view class="flex align-center" v-if="judgeWaitTeck(it.status_str)">
									<view class="btn1" @tap='toLogisticsInfor(it)'>查看物流</view>
									<view class="btn2" @tap='toCommit(it)'>确认收货</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitGoods(it.status_str)">
									<view class="btn2" @tap="toApplyReturn('退款',it)">申请退款</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitPay(it.status_str)">
									<view class="btn1" @tap='cancelOrder(it)'>取消订单</view>
									<view class="btn2" @tap='toPayOrder(it)'>立即付款</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view v-if="curr==3"><block v-for="(it,index) in orderList">
						<view class="order">
							<view class="top flex align-center justify-between">
								<text>订单号: {{it.order_no}}</text>
								<text>{{it.status_str}}</text>
							</view>
							<view class="list" @tap='toOrderDetail(it.order_no)'>
								<block v-for="(itg,ind) in it.order_goods">
									<view class="item flex align-center justify-between">
										<image :src="itg.img_url"></image>
										<view class="flex flex-direction">
											<text>{{itg.title}}</text>
											<text>规格：{{itg.goods_guige}}</text>
										</view>
										<view class="flex flex-direction">
											<text class="text-price">{{itg.sell_price}}</text>
											<text>×{{itg.quantity}}</text>
										</view>
									</view>
								</block>
							</view>
							<view class="order-btom flex flex-direction align-end">
								<view>
									<text class="text1">总计{{it.order_num}}件商品</text>
									<text class="text2">合计</text>
									<text class="text3 text-price">{{it.order_amount}}</text>
									<text class="text2"></text>
								</view>
								<view class="flex align-center" v-if="judgeFinish(it.status_str)">
									<!-- <view class="btn1" @tap="toApplyReturn('退货',it)">申请退货</view>
									<view class="btn1" @tap="toApplyReturn('换货',it)">申请换货</view> -->
									<view class="btn2" @tap='delOrder(it)'>删除订单</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitCom(it.status_str)">
									<!-- <view class="btn1" @tap="toApplyReturn('退货',it)">申请退货</view>
									<view class="btn1" @tap="toApplyReturn('换货',it)">申请换货</view> -->
								<!-- 	<view class="btn2" @tap='toEvaluationOrder(it)'>去评价</view> -->
								</view>
								<view class="flex align-center" v-if="judgeWaitTeck(it.status_str)">
									<view class="btn1" @tap='toLogisticsInfor(it)'>查看物流</view>
									<view class="btn2" @tap='toCommit(it)'>确认收货</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitGoods(it.status_str)">
									<view class="btn2" @tap="toApplyReturn('退款',it)">申请退款</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitPay(it.status_str)">
									<view class="btn1" @tap='cancelOrder(it)'>取消订单</view>
									<view class="btn2" @tap='toPayOrder(it)'>立即付款</view>
								</view>
							</view>
						</view>
					</block></view>
				<view v-if="curr==4"><block v-for="(it,index) in orderList">
						<view class="order">
							<view class="top flex align-center justify-between">
								<text>订单号: {{it.order_no}}</text>
								<text>{{it.status_str}}</text>
							</view>
							<view class="list" @tap='toOrderDetail(it.order_no)'>
								<block v-for="(itg,ind) in it.order_goods">
									<view class="item flex align-center justify-between">
										<image :src="itg.img_url"></image>
										<view class="flex flex-direction">
											<text>{{itg.title}}</text>
											<text>规格：{{itg.goods_guige}}</text>
										</view>
										<view class="flex flex-direction">
											<text class="text-price">{{itg.sell_price}}</text>
											<text>×{{itg.quantity}}</text>
										</view>
									</view>
								</block>
							</view>
							<view class="order-btom flex flex-direction align-end">
								<view>
									<text class="text1">总计{{it.order_num}}件商品</text>
									<text class="text2">合计</text>
									<text class="text3 text-price">{{it.order_amount}}</text>
									<text class="text2"></text>
								</view>
								<view class="flex align-center" v-if="judgeFinish(it.status_str)">
									<!-- <view class="btn1" @tap="toApplyReturn('退货',it)">申请退货</view>
									<view class="btn1" @tap="toApplyReturn('换货',it)">申请换货</view> -->
									<view class="btn2" @tap='delOrder(it)'>删除订单</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitCom(it.status_str)">
									<!-- <view class="btn1" @tap="toApplyReturn('退货',it)">申请退货</view>
									<view class="btn1" @tap="toApplyReturn('换货',it)">申请换货</view> -->
									<!-- <view class="btn2" @tap='toEvaluationOrder(it)'>去评价</view> -->
								</view>
								<view class="flex align-center" v-if="judgeWaitTeck(it.status_str)">
									<view class="btn1" @tap='toLogisticsInfor(it)'>查看物流</view>
									<view class="btn2" @tap='toCommit(it)'>确认收货</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitGoods(it.status_str)">
									<view class="btn2" @tap="toApplyReturn('退款',it)">申请退款</view>
								</view>
								<view class="flex align-center" v-if="judgeWaitPay(it.status_str)">
									<view class="btn1" @tap='cancelOrder(it)'>取消订单</view>
									<view class="btn2" @tap='toPayOrder(it)'>立即付款</view>
								</view>
							</view>
						</view>
					</block></view>
		<!-- #ifdef MP-ALIPAY -->
		<view class="empty"><u-empty text="暂无订单" mode="list" v-if="orderList.length==0"></u-empty></view>
		<!-- #endif -->
		<view class="flex solid-bottom padding justify-center">
			<text class="loadMore">{{loadStr}}</text>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				refreshing: false,
				loadStr: '',
				fetchPageNum: 1,
				orderList: [],
				type: 0,
				curr: 0,
				finshed:false,
				limit:30

			}
		},
		computed: {
			judgeFinish: function() {
				return function(val) {
					if (val == '交易完成') {
						return true;
					} else {
						return false;
					}
				}

			},
			judgeWaitGoods: function() {
				return function(val) {
					if (val == '待发货') {
						return true;
					} else {
						return false;
					}
				}

			},
			judgeWaitPay: function() {
				return function(val) {
					if (val == '待付款') {
						return true;
					} else {
						return false;
					}
				}

			},
			judgeWaitTeck: function() {
				return function(val) {
					if (val == '待收货') {
						return true;
					} else {
						return false;
					}
				}

			},
			judgeWaitCom: function() {
				return function(val) {
					if (val == '待评价') {
						return true;
					} else {
						return false;
					}
				}

			},
			judgeWaitCancel: function() {
				return function(val) {
					if (val == '已取消') {
						return true;
					} else {
						return false;
					}
				}

			}
		},
		onShow() {
			
		},
		onLoad(op) {
			if (op.type) {
				this.type = op.type-1
				this.currbtn(this.type)
			}else{
				this.loadMyOrder()
			}
			// this.loadMyOrder()
		},
		onReachBottom() {
			console.log('滑动到页面底部')
			this.loadMyOrder();
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			this.refreshing = true;
			this.loadMyOrder();
		},
		methods: {
			loadMyOrder: function() {
				let that = this
				if(that.finshed==true){
					uni.stopPullDownRefresh();
					return uni.showToast({
						title:'已加载完',
						icon:'none'
					})
				}
				try {
					
					console.log('loadMyOrder type:' + that.type)
					var userId = uni.getStorageSync('user').user_id;
					that.loadStr = '加载中...'
					api.get({
						url: 'UserOrder/GetOrderList',
						data: {
							seach: '',
							user_id: userId,
							type: that.type,
							page: that.refreshing ? 1 : that.fetchPageNum,
							pagesize: that.limit
						},
						success: data => {
							that.loadStr = ''
							console.log('loadMyOrder:' + JSON.stringify(data))
							if (data.ErrCode == 0) {
								if (data.Response.length <= that.limit) {
									that. finshed = true;
								}
								this.orderList = this.orderList.concat(data.Response)
								this.fetchPageNum += 1
								console.log(this.orderList.length)
								this.refreshing = false;
								uni.stopPullDownRefresh();

							} else if (data.ErrCode == 2) {
								if (data.ErrMsg == '暂无内容') {
									this.refreshing = false;
									uni.stopPullDownRefresh();
									this.loadStr = '已经到底了'
									return;
								}
							}
						}
					});
				} catch (e) {
					uni.showModal({
						title: '提示',
						content: '账号超时，请重新登陆',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				}
			},
			delOrder: function(item) {
				api.get({
					url: 'UserOrder/GetOrderDel',
					data: {
						order_no: item.order_no,
					},
					success: data => {
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							uni.showModal({
								title: '提示',
								content: '成功',
							})
							this.currbtn(this.type)
						}
					}
				});
			},
			cancelOrder: function(item) {
				api.get({
					url: 'UserOrder/GetOrderCancel',
					data: {
						order_no: item.order_no,
					},
					success: data => {
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							uni.showModal({
								title: '提示',
								content: '成功',
							})
							this.currbtn(this.type)
						}
					}
				});
			},
			toApplyReturn: function(type, item) {
				uni.navigateTo({
					url: '/pages/applyReturn/applyReturn?type=' + type + '&order_id=' + item.order_id + '&amount=' + item.order_amount,
				})

			},
			toOrderDetail: function(orderNo) {
				console.log(orderNo)
				uni.navigateTo({
					url: '/pages/orderDetails/orderDetails?order_no=' + orderNo
				})

			},
			toPayOrder: function(it) {
				console.log(JSON.stringify(it))
				var tem = {
					order_no: it.order_no,
					order_id: it.order_id,
					order_type: ''
				}
				uni.navigateTo({
					url: '/pages/paymentOrder/paymentOrder?key=' + JSON.stringify(tem)
				})

			},
			toEvaluationOrder: function(it) {
				console.log(JSON.stringify(it))
				uni.navigateTo({
					url: 'pages/evaluationOrder/evaluationOrder?key=' + it.order_goods[0].goods_id
				})
			},
			toLogisticsInfor: function(it) {
				console.log(JSON.stringify(it))
				uni.navigateTo({
					url: '/pages/logisticsInfor/logisticsInfor?key=' + it.express_url
				})
			},
			toCommit: function(it) {
				console.log(JSON.stringify(it))
				api.get({
					url: 'UserOrder/GetOrderSuc',
					data: {
						order_no: it.order_no,
					},
					success: data => {
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							uni.showToast({
								title:'确认收货成功'
							})
							uni.navigateTo({
								url:'/module/my/myOrder/myOrder'
							})
						}
					}
				});
			},
			currbtn: function(ind) {
				this.curr = ind
				this.type = ind
				this.fetchPageNum =1
				this.orderList = []
				this.finshed=false;
				this.loadMyOrder()
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.empty{
		height: 600rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.top-item{
			width: 110rpx;
			height: 70rpx;
			align-items: center;
			justify-content: center;
		}
		.top-action{
			width: 110rpx;
			height: 70rpx;
			border-bottom: 2rpx solid $btn-bground;
			align-items: center;
			justify-content: center;
		}
		.top-action text{
			color: $btn-bground;
		}
		.tops{
			background-color: #fff;
			width: 100%;
			border-bottom: 1rpx solid #eeeeee;
			height: 70rpx;
			align-items: center;
			justify-content: space-around;
			
		}
		.row{
			display: flex;
			flex-direction: row;
		}
		.column{
			display: flex;
			flex-direction: column;
		}
		.btn1{
			width: 160upx;
				height: 54upx;
				border-radius: 27upx;
				border: solid 1upx #cccccc;
				text-align: center;
				line-height: 54upx;
				font-size: 26upx;
					color: #444;
					margin-right: 20upx;
					margin-top: 20upx;
		}
		.btn2{
			margin-top: 20upx;
		width: 160upx;
			height: 54upx;
			border-radius: 27upx;
				border: solid 1upx $btn-bground;
				text-align: center;
				line-height: 54upx;
				font-size: 26upx;
					color: $btn-bground;
		}
		.order-btom{
			width: 100%;
			background-color: #fff;
			padding: 20upx;
			box-sizing: border-box;
		}
		.text1{
			font-size: 22upx;
				color: #828282;
		}
		.text2{
			font-size: 24upx;
				color: #666666;
				margin-left: 10upx;
		}
		.text3{
			margin-left: 10upx;
			font-size: 30upx;
				color: #000000;
		}
		.order{
			margin-bottom: 20upx;
		}
		.top>text:nth-child(1){
				font-size: 24upx;
				color: #999999;
		}
		.top>text:nth-child(2){
				font-size: 28upx;
				color: $btn-bground;
		}
		.top{
			padding: 0 20upx;
			height: 76upx;
			width: 100%;
			background-color: #fff;
			border-bottom: 1upx solid #ddd;
		}
	.item>view:nth-child(3)>text{
			text-align: right;
				font-size: 24upx;
				color: #000000;
		}
		.item>view:nth-child(3)>text:nth-child(2){
			color: #999999;
		}
		.item>view:nth-child(2){
			width: 382upx;
		}
		.item>view:nth-child(2)>text:nth-child(1){
			font-size: 28upx;
				color: #000000;
		}
		.item>view:nth-child(2)>text:nth-child(2){
		font-size: 22upx;
			color: #999999;
			margin-top: 20upx;
		}
		.item{
			padding: 0 20upx;
			width: 100%;
			height: 190upx;
			background-color: #fff;
			border-bottom: 1upx solid #ddd;
		}
		.item image{
			width: 187upx;
				height: 141upx;
		}
</style>
